<template>
	<view>
		<image :src="accountSecurity" mode="widthFix" class="head-img"></image>
		<view class="txt">
			<view class="title">确认注销账户？</view>
			<view class="tip">注销账户后以下数据将全部清空</view>
			<view class="list">
				<view class="item">企业组织架构和员工信息</view>
				<view class="item">所有数据和聊天记录</view>
				<view class="item">删除和永久注销JNPF账户</view>
			</view>
		</view>
		<view class="foot">
			<view class="btn" @click="cancellation" hover-class="com-hover-btn">注销账号</view>
		</view>
	</view>
	</view>
</template>

<script>
	import config from '@/common/js/config.js'
	export default {
		data() {
			return {
				accountSecurity: config.Resources.banner.accountSecurity
			}
		},
		methods: {
			cancellation() {
				uni.showModal({
					// title: '提示',
					content: '您的JNPF账号将被删除，您确定要注销JNPF账号么？',
					success: (res) => {
						if (res.confirm) {
							try {
								const userProvider = uni.getStorageSync(config.Global.cache + '_UserProvider');
								const apiKey = uni.getStorageSync('apiKey');
								uni.removeStorage({
									key: config.Global.cache + '_Token',
								});
								uni.removeStorage({
									key: config.Global.cache + '_UserProvider',
								});
								const account = uni.getStorageSync(config.Global.cache + '_Account');
								if (account) {
									uni.setStorage({
										key: config.Global.cache + '_To_' + account + '_Recently',
										data: _this.recentlyList
									});
								}
								uni.removeStorage({
									key: config.Global.cache + '_appsoftware_key'
								});
								uni.setStorage({
									key: apiKey + '_cancellation',
									data: true,
								});
								uni.reLaunch({
									url: '/pages/users/sign-in/sign-in',
								});
							} catch (e) {
								//TODO handle the exception
							}
						}
					},
				})
			}
		}
	}
</script>

<style lang="scss">
	.head-img {
		width: 100%;
		height: auto;
	}

	.foot {
		position: fixed;
		left: 0;
		bottom: 30upx;
		padding: 0 50upx;
		right: 0;

		.btn {
			width: 100%;
			height: 100upx;
			border-radius: 10upx;
			text-align: center;
			line-height: 100upx;
			color: #fff;
			font-size: 30upx;
			background-color: #3281ff;
		}
	}

	.txt {
		padding: 160upx 0 0 195upx;
	}

	.title {
		font-size: 36upx;
		font-weight: bold;
		color: #356EFE;
		line-height: 40upx;
		margin-bottom: 50upx;
	}

	.tip {
		font-size: 28upx;
		color: #252B3A;
		line-height: 40upx;
		margin-bottom: 50upx;
	}

	.list {
		.item {
			line-height: 40upx;
			margin-bottom: 35upx;
			font-size: 24upx;
			color: #666;
			padding-left: 40upx;
			position: relative;

			&::before {
				content: '';
				display: block;
				width: 12upx;
				height: 12upx;
				position: absolute;
				left: 0;
				top: 14upx;
				border-radius: 50%;
				background-color: #356efe;
			}
		}
	}
</style>
